<template>
  <q-page class="q-pa-md">
    <header class="page-header row items-start">
      <q-breadcrumbs class="header-title" active-color="grey-7">
        <q-breadcrumbs-el class="first-breadcrumbs"  label="员工管理" />
        <q-breadcrumbs-el label="详情" class="text-weight-medium" />
      </q-breadcrumbs>
      <q-space />
    </header>
    <q-form @submit="onSubmit" class="q-gutter-md form">
      <!-- 编号 -->
      <q-input
        v-model="formData.code"
        label="编号"
        outlined
        dense
        :rules="[val => !!val || '编号不能为空']"
      />

      <!-- 姓名 -->
      <q-input
        v-model="formData.name"
        label="姓名"
        outlined
        dense
        :rules="[val => !!val || '姓名不能为空']"
      />



      <!-- 身份证 -->
      <q-input
        v-model="formData.identity"
        label="身份证"
        outlined
        dense
        :rules="[val => !!val || '身份证不能为空']"
      />

      <!-- 性别 -->
      <q-select
        v-model="formData.gender"
        label="性别"
        outlined
        dense
        :options="['男', '女']"
        :rules="[val => !!val || '性别不能为空']"
      />
      <!-- 手机 -->
      <q-input
        v-model="formData.phone"
        label="手机"
        outlined
        dense
        :rules="[val => !!val || '手机不能为空']"
      />

      <!-- 邮箱 -->
      <q-input
        v-model="formData.email"
        label="邮箱"
        outlined
        dense
        :rules="[val => !!val || '邮箱不能为空']"
      />
      <!-- 照片 -->
      <q-file
        v-model="formData.photo"
        label="照片"
        outlined
        dense
        accept=".jpg, .png"
      />

      <!-- 出生日期 -->
      <q-input
        v-model="formData.birthday"
        label="出生日期"
        outlined
        dense
      />

      <!-- 籍贯 -->
      <q-input
        v-model="formData.native"
        label="籍贯"
        outlined
        dense
      />

      <!-- 户口 -->
      <q-input
        v-model="formData.residence"
        label="户口"
        outlined
        dense
      />

      <!-- 民族 -->
      <q-input
        v-model="formData.nation"
        label="民族"
        outlined
        dense
      />

      <!-- 婚姻状态 -->
      <q-select
        v-model="formData.marriage"
        label="婚姻状态"
        outlined
        dense
        :options="['未婚', '已婚', '离异', '丧偶']"
      />

      <!-- 政治面貌 -->
      <q-input
        v-model="formData.politic"
        label="政治面貌"
        outlined
        dense
      />

      <!-- 参加工作时间 -->
      <q-input
        v-model="formData.work_date"
        label="参加工作时间"
        outlined
        dense
      />

      <!-- 加入本单位时间 -->
      <q-input
        v-model="formData.join_date"
        label="加入本单位时间"
        outlined
        dense
      />

      <!-- 部门 -->
      <q-input
        v-model="formData.department"
        label="部门"
        outlined
        dense
      />

      <!-- 现任职位 -->
      <q-input
        v-model="formData.title"
        label="现任职位"
        outlined
        dense
      />

      <!-- 任职时间 -->
      <q-input
        v-model="formData.on_date"
        label="任职时间"
        outlined
        dense
      />
      <!-- 状态 -->
      <q-select
        v-model="formData.status"
        label="状态"
        outlined
        dense
        :options="['在职', '离职']"
      />

      <!-- 离职时间 -->
      <q-input
        v-model="formData.quit_date"
        label="离职时间"
        outlined
        dense
        type="textarea"
        v-if="formData.status === '离职'"
      />

      <!-- 工作经历 -->
      <q-input
        v-model="formData.work_history"
        label="工作经历"
        outlined
        dense
        type="textarea"
      />

      <!-- 最高学历 -->
      <q-input
        v-model="formData.degree"
        label="最高学历"
        outlined
        dense
      />

      <!-- 专业 -->
      <q-input
        v-model="formData.major"
        label="专业"
        outlined
        dense
      />

      <!-- 教育经历 -->
      <q-input
        v-model="formData.education"
        label="教育经历"
        outlined
        dense
        type="textarea"
      />

      <!-- 历年考核记录 -->
      <q-input
        v-model="formData.assess_records"
        label="历年考核记录"
        outlined
        dense
        type="textarea"
      />



      <!-- 提交按钮 -->
      <q-btn type="submit" color="primary" label="提交" />
    </q-form>
  </q-page>
</template>

<script>
import { api } from 'boot/axios'

export default {
  data() {
    return {
      formData: {
        code: '',
        name: '',
        photo: null,
        identity: '',
        gender: '',
        birthday: '',
        native: '',
        residence: '',
        nation: '',
        marriage: '',
        politic: '',
        phone: '',
        email: '',
        work_date: '',
        join_date: '',
        department: '',
        title: '',
        on_date: '',
        work_history: '',
        degree: '',
        major: '',
        education: '',
        assess_records: '',
        status: '在职',
        quit_date: '',
      },
    };
  },

  created() {  // 新增生命周期钩子‌:ml-citation{ref="3" data="citationList"}
    const userId = this.$route.query.user_id;
    console.log('yyyyyyyyyyyyyyyyyy')
    console.log(userId)
    if (userId) {
      this.loadUserData(userId);
    } else {
      this.$q.notify({ type: 'warning', message: 'URL中缺少用户ID参数' });
    }
  },

  methods: {
    onSubmit() {
      // 表单验证通过后执行提交逻辑
      console.log('表单数据:', this.formData);
      this.submitForm();
    },
    async loadUserData(userId) {  // 新增数据加载方法‌:ml-citation{ref="6" data="citationList"}
      try {
        const response = await api.get('/user/info', {
          params: { user_id: userId }
        });
        this.formData = response.data;
      } catch (error) {
        this.$q.notify({
          type: 'negative',
          message: '数据加载失败: ' + error.message
        });
      }
    },
  },
};
</script>

<style lang="scss">
 .page-header {
    z-index: 2;
    margin: 10px;
    .header-title {
      font-size: 15px;

      .first-breadcrumbs {
        .q-breadcrumbs__el-icon {
          font-size: 140%;
          position: relative;
          top: -1px;
        }
      }
    }
  }

.form {
  max-width: 800px;
  margin: 0 auto;
}
</style>
